﻿@page "/butil/crypto"
@inherits AppComponentBase
@inject Bit.Butil.Crypto crypto

<PageOutlet Url="butil/crypto"
            Title="Crypto - Butil"
            Description="Crypto class of the bit Butil" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Crypto</BitText>
    <BitText Color="BitColor.SecondaryForeground" Gutter>Cryptography API (Encryption/Decryption)</BitText>
    <br />
    <BitText Gutter>
        How to use the Crypto class of the bit Butil?
    </BitText>
    <br />

    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
        <div class="section-card-txt">
            To use the browser crypto features you need to inject the Bit.Butil.Crypto class and use it like this:
<CodeBox HideCopyButton>
@@inject Bit.Butil.Crypto crypto

@@code {
    await crypto.Encrypt(...);
}</CodeBox>
        </div>
    </section>

    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
        <div class="section-card-txt">
            <br />
            <b>Encrypt</b>: <br />
            The Encrypt method of the Crypto interface that encrypts data
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @encryptExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="encryptText" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@Encrypt">Encrypt</BitButton>
                        <br />
                        <br />
                        <div>Encrypted text: @encryptedText</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
            <br /><br />

            <b>Decrypt</b>: <br />
            The Decrypt method of the Crypto interface that decrypts data
            (<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt" target="_blank">MDN</a>).
            <br /><br />
            <BitAccordion Title="Sample">
                <BitPivot>
                    <BitPivotItem HeaderText="Code">
                        <CodeBox>
                            @decryptExampleCode
                        </CodeBox>
                    </BitPivotItem>
                    <BitPivotItem HeaderText="Result">
                        <br />
                        <BitTextField @bind-Value="decryptText" Style="max-width: 18.75rem;" />
                        <br />
                        <BitButton OnClick="@Decrypt">Decrypt</BitButton>
                        <br />
                        <br />
                        <div>Decrypted text: @decryptedText</div>
                        <br />
                    </BitPivotItem>
                </BitPivot>
            </BitAccordion>
        </div>
    </section>
</div>

<NavigationButtons Prev="Setup" PrevUrl="/butil/setup" Next="WebAuthn" NextUrl="/butil/webAuthn" />
